<template>
	<view class="app-public-msg-detail-custom-msg">
		<view class="app-public-msg-detail-custom-msg__goods bg-white e-radius-16 e-p-20" v-if="msg.type === '1'"
			@tap="$goTo('/pages/classify/goods/info/index', {
								id: msg.pId
							})">
			<view class="e-p-r-20">
				<load-image mode="aspectFill" :size="['140rpx']" radius="10rpx" :src="msg.productImage"></load-image>
			</view>
			<view class="app-public-msg-detail-custom-msg__goods__right  ">
				<view >
					<text class="e-line-2" style="width: 330rpx;">{{msg.productName}}</text>
				</view>
				<view class="app-public-msg-detail-custom-msg__goods__right-txt">
					<text class="c-red e-font-26 e-p-r-20">{{msg.price}}</text>
					<!-- <text class="c-secondary e-font-22"
						v-if="info.data.priceScribing">{{unitEn}}{{info.data.priceScribing}}</text> -->

				</view>
			</view>
		</view>
		<view class="app-public-msg-detail-custom-msg__order bg-white e-radius-16 e-p-20" v-if="msg.type === '2'" @tap="$goTo('/pages/systemPay/order/details/index', { id: info.data.orderId })">
			<view class="e-m-b-20">
				<text class="e-font-30 fw-600">{{toI18('public.orderMsgTitle')}}</text>
			</view>
			<view class="app-public-msg-detail-custom-msg__order__body bg-f7 e-p-10 e-m-b-16" v-if="goods">
				<view class="e-p-r-20">
					<load-image mode="aspectFill" :size="['86rpx']" radius="10rpx" :src="goods.img"></load-image>
				</view>
				<view class="app-public-msg-detail-custom-msg__order__right  ">
					<view >
						<text class="e-line-1" style="width: 330rpx;">{{goods.commodityName}}</text>
					</view>
					<view class="app-public-msg-detail-custom-msg__order__right-txt">
						<text
							class="c-secondary e-font-26 e-p-r-10">{{toI18('cart.共')}}{{goods.commodityCount}}{{toI18('classify.件')}}</text>
						<text class="c-secondary e-font-26">{{goods.orderMoneyPay}}</text>

					</view>
				</view>
			</view>
			<view class="app-public-msg-detail-custom-msg__order__list e-m-b-12">
				<text class="e-font-26 c-secondary">{{toI18('order.订单编号')}}:</text>
				<text class="e-font-26">{{msg.orderId}}</text>
			</view>
			<view class="app-public-msg-detail-custom-msg__order__list">
				<text class="e-font-26 c-secondary">{{toI18('common.createTime')}}:</text>
				<text class="e-font-26">{{msg.createTime}}</text>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {computed} from 'vue'
	import type {
		ReceiveMsg
	} from '@/common/utils/IM'
	// #ifndef APP-NVUE
	import {
		useI18n
	} from '@/common/hooks'
	// #endif
	const props = defineProps<{
		info : ReceiveMsg,
		unitEn : string
	}>()

	// #ifdef APP-NVUE
	const toI18 = getApp().globalData.$t
	// #endif
	// #ifndef APP-NVUE
	const toI18 = useI18n('')
	// #endif
	const msg = computed(() => {
		return JSON.parse(props.info.c)
	})
	
	const goods = computed(() => {
		if(msg.value&&msg.value.type === 2){
			return msg.value.deputys[0]
		}
		return null
	})
</script>

<style lang="scss" scoped>
	@include appBem_b(public-msg-detail-custom-msg) {
		@include appBem_e(goods) {
			@include flex;
			align-items: center;
			width: 510rpx;

			&__right {
				height: 140rpx;
				/*  #ifndef  APP-NVUE  */
				flex: 1;
				/*  #endif  */
				align-items: flex-start;

				&-txt {
					@include flex;
					/*  #ifndef  APP-NVUE  */
					flex: 1;
					width: 100%;
					/*  #endif  */
					align-items: flex-end;
				}
			}

		}

		@include appBem_e(order) {
			@include flex(column);
			width: 510rpx;

			&__body {
				@include flex;
				align-items: center;
			}

			&__right {
				height: 86rpx;
				/*  #ifndef  APP-NVUE  */
				flex: 1;
				/*  #endif  */
				align-items: flex-start;

				&-txt {
					@include flex;
					/*  #ifndef  APP-NVUE  */
					flex: 1;
					width: 100%;
					/*  #endif  */
					align-items: flex-end;
				}
			}

			&__list {
				@include flex;
				justify-content: space-between;
				align-items: center;
			}

		}
	}
</style>